<template>
  <view class="container padding-top">
    <!-- 顶部用户信息区 -->
    <view class="user-header">
   
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <text class="nickname text-bold text-xl" style="color: #292421;">{{ userInfo.nickname }}</text>
      </view>
    </view>

    <!-- 消费券区域 -->
    <view class="coupon-card margin-tb"  @click="$api.toPage('/sub-user/pages/my-consumer/my-consumer')" >
      <view class="coupon-info" >
       <view class="topone flex align-center">
         <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/index/juan.png" size="60"></u-icon>
         <text class="text-bold text-df margin-left-sm" >我的消费券</text>
       </view>
        <view class="amount flex justify-center align-center">
          <text class="num text-df">40</text>
      <u-icon name="arrow-right" style="color:white;"></u-icon>
        </view>
      </view>
    </view>

    <!-- 订单区域 -->
    <view class="order-section margin-tb" >
      <view class="section-header">
        <text class="text-df text-bold" style="color: #292421;">我的订单</text>
        <view class="more" @click="$api.toPage('/pages/order/list')">
          <text class="text-sm" style="color: #ACACAC">查看全部订单</text>
         <u-icon name="arrow-right" style="color: #ACACAC;"></u-icon>
        </view>
      </view>
      <view class="order-types">
        <view class="type-item" v-for="(item, index) in orderTypes" :key="index" @click="$api.toPage(item.url)">
          <u-icon
            size="56"
            :name="item.icon"
          ></u-icon>
          <text class="text-sm" style="color: #7B7B7B;">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="$api.toPage(item.url)">
        <view class="item-left flex justify-center align-center" >
          <u-icon
            size="40"
            :name="item.icon" 
          ></u-icon>
          <text class="text-df margin-left-sm" style="color: #292421;">{{ item.name }}</text>
        </view>
        <view class="item-right">
          <text v-if="item.count" class="count">{{ item.count }}</text>
         <u-icon name="arrow-right" style="color: #ACACAC;"></u-icon>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout margin-tb radius-10" >
      <view class="text-df radius-10" style="color: #7B7B7B;">退出登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://env-00jxhp9tck2a.normal.cloudstatic.cn/home/banner-image.png',
        nickname: '808bass'
      },
      orderTypes: [
        { name: '待付款', icon: "https://env-00jxt1fzew48.normal.cloudstatic.cn/index/pay.png", url: '/pages/order/list?type=1' },
        { name: '待发货', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/get.png', url: '/pages/order/list?type=2' },
        { name: '待收货', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/shou.png', url: '/pages/order/list?type=3' },
        { name: '待评价', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/order.png', url: '/pages/order/list?type=4' },
        { name: '售后', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/tui.png', url: '/pages/order/list?type=5' }
      ],
      menuList: [
        { name: '我的足迹', icon: "https://env-00jxt1fzew48.normal.cloudstatic.cn/index/footer.png", count: '14', url: '/pages/footprint/index' },
        { name: '我的收藏', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/star.png', count: '2', url: '/pages/collect/index' },
        { name: '收货地址', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/dizhi.png', url: '/pages/address/index' },
        { name: '个人信息', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/geren.png', url: '/pages/userinfo/index' },
        { name: '设置', icon: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/index/setting.png', url: '/pages/settings/index' }
      ]
    }
  },
  methods: {
    navTo(url) {
      uni.navigateTo({ url })
    },
    handleLogout() {
      ({
        title: '提示',
        content: '确认退出登录？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录逻辑
            uni.removeStorageSync('token')
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-header {

  padding: 20rpx 30rpx;

  .header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .header-icons {
      .iconfont {
        margin-left: 30rpx;
        font-size: 40rpx;
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
    }

    .nickname {
      margin-left: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
}

.coupon-card {
  
  background-color: #ff6b6b;
  border-radius: 20rpx;
  padding: 30rpx;
height: 120rpx;
  .coupon-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;

    .amount {
      display: flex;
      align-items: center;

      .num {
        font-size: 40rpx;
        font-weight: bold;
        margin-right: 10rpx;
      }
    }
  }
}

.order-section {
height: 224rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
width: 100%;
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .more {
      color: #999;
      font-size: 24rpx;
    }
  }

  .order-types {
    display: flex;
    justify-content: space-between;

    .type-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .iconfont {
        font-size: 50rpx;
        margin-bottom: 10rpx;
      }

      text {
        font-size: 24rpx;
      }
    }
  }
}

.menu-list {
  width: 100%;
  height: 460rpx;
  background-color: #ffffff;
  border-radius: 20rpx;

  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .item-left {
      display: flex;
      align-items: center;

      .iconfont {
        margin-right: 20rpx;
        font-size: 40rpx;
      }
    }

    .item-right {
      display: flex;
      align-items: center;

      .count {
        color: #999;
        margin-right: 10rpx;
      }

      .arrow {
        color: #999;
      }
    }
  }
}

.logout {
  margin-top: 50rpx;
width: 100%;
border-radius: 20rpx;
  background-color: #ffffff;

  padding: 30rpx;
  text-align: center;
  color: #ff6b6b;
}
</style>